<template>
  <div class="metrics-item">
    <div class="metrics-header">{{ title }}</div>
    <div class="metrics-cards">
      <div
        v-for="(metric, index) in metricsData"
        :key="index"
        class="metric-card"
        :class="getCardColorClass(metric.score)"
      >
        <div class="metric-content">
          <div class="metric-name">{{ metric.title }}/</div>
          <div class="metric-score"> {{ metric.score }}</div>
        </div>
        <div class="metric-stats">
          <span class="metric-review-count"
            >{{ metric.reviewCount }} reviews/</span
          >
          <span class="metric-sentiment">{{ metric.sentiment }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    metricsData: Array,
  },
  methods: {
    getCardColorClass(score) {
      if (score > 9) return "metric-card--dark-green";
      if (score >= 8) return "metric-card--light-green";
      if (score >= 7) return "metric-card--yellow-green";
      if (score >= 6) return "metric-card--bright-yellow";
      if (score >= 5) return "metric-card--pink";
      if (score >= 4) return "metric-card--orange-red";
      return "metric-card--dark-red";
    },
  },
};
</script>

<style scoped lang="scss">
.metrics-item {
  width: 100%;
  .metrics-header {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
  }
  .metrics-cards {
    display: grid;
    gap: 8px;
    .metric-card {
      padding: 10px;
      border-radius: 4px;
      height: 37px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .metric-content {
        display: flex;
        font-size: 14px;
        font-weight: 400;
      }
      .metric-stats {
        font-size: 12px;
        font-weight: 500;
        text-align: right;
      }
    }
  }
}

// 颜色样式
.metric-card--dark-green {
  background: #21911a;
  color: white;
}
.metric-card--light-green {
  background: #5aca54;
  color: white;
}
.metric-card--yellow-green {
  background: #eac74a;
  color: black;
}
.metric-card--bright-yellow {
  background: #e29944;
  color: white;
}
.metric-card--pink {
  background: #fe7878;
  color: white;
}
.metric-card--orange-red {
  background: #d03a21;
  color: black;
}
.metric-card--dark-red {
  background: #6c0800;
  color: white;
}
</style>
